<template>
  <el-container>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/productList' }">产品列表</el-breadcrumb-item>
      <el-breadcrumb-item>{{ product?.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="100" class="row">
      <el-col :span="12">
        <img :src="getImagePath(product.image)" alt="" />
      </el-col>
      <el-col :span="12">
        <div class="title">{{ product?.name }}</div>
        <div class="title">¥ {{ product?.price }}</div>
        <el-button @click="addToCart">加入购物车</el-button>
      </el-col>
    </el-row>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import products from "../data/products.json";
import s88 from "@/assets/racket/s88.jpg";
import pro800 from "@/assets/racket/pro800.jpg";
import pro11 from "@/assets/racket/pro11.jpg";
import pcaz2 from "@/assets/shoes/pcaz2.jpg";
import cfz3 from "@/assets/shoes/cfz3.jpg";
import pce3 from "@/assets/shoes/pce3.jpg";
import l63 from "@/assets/line/l63.jpg";
import ab from "@/assets/line/ab.jpg";
import l95 from "@/assets/line/l95.jpg";
const route = useRoute(); // 获取当前路由对象
const productId = route.params.id; // 获取路由参数 "id"
const product = ref(null);
import { useAuthStore } from "@/stores/auth";
const authStore = useAuthStore(); // 使用 Pinia 的 authStore

const init = () => {
  product.value = products.find((item) => item.id === parseInt(productId));
};

init();

// 映射图片路径
const imageMap = {
  "@/assets/racket/s88.jpg": s88,
  "@/assets/racket/pro800.jpg": pro800,
  "@/assets/racket/pro11.jpg": pro11,
  "@/assets/shoes/pcaz2.jpg": pcaz2,
  "@/assets/shoes/cfz3.jpg": cfz3,
  "@/assets/shoes/pce3.jpg": pce3,
  "@/assets/line/l63.jpg": l63,
  "@/assets/line/ab.jpg": ab,
  "@/assets/line/l95.jpg": l95,
};
// 获取图片路径
const getImagePath = (path) => {
  return imageMap[path] || path;
};
const addToCart = () => {
  if (product.value) {
    authStore.shop.push(product.value); // 将产品添加到购物车
    alert("已添加到购物车！");
  } else {
    alert("产品数据加载失败！");
  }
};
</script>

<style scoped>
.el-container {
  width: 80%;
  margin: 40px auto;
  display: block;
}
.row {
  margin: 40px auto;
}
img {
  width: 100%;
  border: 1px black solid;
}
.title {
  width: 100%;
  font-size: 24px;
  line-height: 80px;
  border-bottom: 1px solid black;
}

.product-details {
  list-style: none;
  padding: 10px;
  margin: 0;
}
.product-details li {
  line-height: 60px;
}

.el-button {
  margin-top: 30px;
  width: 100%;
  background: #0057b8;
  color: white;
  height: 40px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>